<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pxx商城</title>
    <script src="../js/vue.global.js"></script>
    <script src="../js/vue-router.global.js"></script>
    <script src="../js/axios.min.js"></script>

    <style>
        /* 配色方案 */
        :root {
            --primary: #ff6b6b;  /* 珊瑚红 */
            --secondary: #4ecdc4;  /* 薄荷绿 */
            --accent: #ffbe76;  /* 阳光黄 */
            --light: #f7f1e3;  /* 奶油白 */
            --dark: #2c3e50;  /* 深蓝灰 */
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: var(--light);
            color: var(--dark);
        }

        /* 顶部搜索框 - 更现代的设计 */
        .search-bar {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .search-container {
            max-width: 600px;
            margin: 0 auto;
            position: relative;
        }

        .search-bar input {
            width: 100%;
            padding: 12px 20px;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            outline: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .search-bar input:focus {
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transform: translateY(-2px);
        }

        /* 内容区域 - 添加卡片效果 */
        .content {
            flex: 1;
            padding: 30px;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        .welcome-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            border-left: 5px solid var(--secondary);
        }

        h2 {
            color: var(--primary);
            margin-bottom: 15px;
            font-size: 28px;
        }

        p {
            color: var(--dark);
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .features {
            display: flex;
            gap: 20px;
            margin-top: 30px;
        }

        .feature-box {
            flex: 1;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            text-align: center;
        }

        .feature-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }

        .feature-box:nth-child(1) {
            border-top: 3px solid var(--primary);
        }

        .feature-box:nth-child(2) {
            border-top: 3px solid var(--secondary);
        }

        .feature-box:nth-child(3) {
            border-top: 3px solid var(--accent);
        }

        /* 底部导航 - 更活泼的设计 */
        .bottom-nav {
            display: flex;
            background: white;
            border-top: 1px solid rgba(0,0,0,0.1);
            box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
            padding: 10px 0;
        }

        .nav-btn {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            color: var(--dark);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            position: relative;
            transition: all 0.3s ease;
        }

        .nav-btn:hover {
            color: var(--primary);
        }

        .nav-btn::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 3px;
            background: var(--primary);
            transition: width 0.3s ease;
        }

        .nav-btn:hover::after {
            width: 50%;
        }

        .nav-btn:nth-child(1):hover {
            color: var(--primary);
        }

        .nav-btn:nth-child(2):hover {
            color: var(--secondary);
        }

        .nav-btn:nth-child(3):hover {
            color: var(--accent);
        }

        .nav-btn:nth-child(1)::after {
            background: var(--primary);
        }

        .nav-btn:nth-child(2)::after {
            background: var(--secondary);
        }

        .nav-btn:nth-child(3)::after {
            background: var(--accent);
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部搜索框 -->
        <div class="search-bar">
            <div v-if="!isLogin">
                <a href="./pages/login.html" class="nav-btn">登录</a>
                <a href="./pages/register.html" class="nav-btn">注册</a>
            </div>
            <div v-else>
                {{loginUser.username}}已登录 |
                <button @click="logout">退出登录</button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <div class="welcome-card">
                <h2>欢迎来到pxx</h2>
                <p>探索我们精选的商品系列，享受愉快的购物体验。</p>
                <p>所有商品都经过精心挑选，为您提供最佳品质。</p>

                <div class="features">
                    <div class="feature-box">
                        <h3>品质保证</h3>
                        <p>所有商品100%正品保障</p>
                    </div>
                    <div class="feature-box">
                        <h3>快速配送</h3>
                        <p>全国范围24小时内发货</p>
                    </div>
                    <div class="feature-box">
                        <h3>无忧售后</h3>
                        <p>7天无理由退换货</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="bottom-nav">
            <a href="#" class="nav-btn">首页</a>
            <a href="./pages/product.html" class="nav-btn">商城</a>
            <a href="./pages/cart.html" class="nav-btn">购物车</a>
            <a href="./pages/mine.html" class="nav-btn">我的</a>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    isLogin: false,
                    loginUser:{}
                }
            },
            methods: {
                checkLogin() {
                     axios.get('user/checkLogin').then(res=>{
                         if(res.status === 200){
                             this.isLogin = true;
                             this.loginUser = res.data;
                         }

                     }).catch(err=>{
                         console.log(err);
                     })
                },
                logout() {
                    console.log('logout');
                    axios.post('user/logout').then(res => {
                        if (res.status === 200) {
                            console.log('logout success');
                            this.isLogin = false;
                            this.loginUser = {};
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            },
            mounted() {
                this.checkLogin();
            }
        });
        app.mount('#app')
    </script>
</body>
</html>